<!--  -->
<template>
  <div style="padding: .75rem;background-color: #fff;border-radius: .5rem;">
      <div class="maintain" v-for="(item, key, index) in datas" :key="index">
        <div class="content flex">
          <span class="maintain-star">{{ key =='old_data'?'变更前':'变更后'}}</span>
          <div class="maintain-warp">
            <div class="maintain-item">
              <template v-if="names!=='客户标签'">
                <div v-for="c_item in item" class="flex-a-c fz-14" style="margin-bottom: 1.0938rem;color:#00001C">
                  <span style="flex:1;flex-shrink: 0;text-align: left;">{{ c_item.title }}</span><span style="flex:2;text-align: left;">{{ c_item.value }}</span>
                </div>
              </template>
              <template v-else>
                <div v-for="c_item in item" class="fz-14" style="margin-bottom: 1.0938rem;color:#00001C">
                  <span style="padding-right: 12px;">{{ c_item.title }}</span>【<span>{{ c_item.value }}</span>】
                </div>

              </template>
            
            </div>
          </div>
        </div>
        <div v-if="tainBtn && key !== 'old_data'" class="maintain-btn" @click="tainPop">查看变更</div>
      </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: '',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    tainBtn: {
      type: Boolean,
      default: true
    },
    names: {
      type:String,
      default:''  
    },
    datas: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
  
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  inject: ['handleChildEvent'],
  //方法集合
  methods: {
    tainPop() {
      this.handleChildEvent(true, this.datas,this.names);
    }
  },
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.maintain-btn {
  text-align: right;
  color: var(--themeBaseColor)
}


.maintain {
  margin-bottom: 1.0938rem;

  .content {
    .maintain-star {
      font-size: 14px;
      color: #6E6E79;
      padding: 0 24px 0 0;
      white-space: nowrap;
    }

    .maintain-warp {
      flex:1;
      .maintain-item {
        font-size: 14px;
        color: #00001C;

        span {
          &:nth-child(1) {
            padding: 0 28px 0 0;
          }
        }
      }
    }
  }
}
</style>